<template>
  <div class="container">
    <navigate>
      线上咨询

      <template v-slot:right>
        <div class="red_dot" v-if="false"></div>
        <img
          @click="$router.push('/consultationRecord')"
          class="message"
          src="@/assets/images/consult/message.png"
          alt=""
        />
      </template>
    </navigate>
    <div class="filter flex_row">
      <van-dropdown-menu active-color="#555555">
        <van-dropdown-item title="咨询师标签" ref="tags">
          <template v-for="item in labelList">
            <van-cell @click="onConfirm(item)" center :key="item.text">
              <template #right-icon>
                <div class="flex_row item flex_align_center between">
                  <div class="flex_row flex_align_center">
                    <img :src="joinUrlImg(item.icon)" alt="" />
                    <div class="text">{{ item.name }}</div>
                  </div>

                  <van-icon
                    v-if="item.name == currentLabel.name"
                    name="success"
                  />
                </div>
              </template>
            </van-cell>
          </template>
        </van-dropdown-item>
      </van-dropdown-menu>
      <van-dropdown-menu active-color="#555555">
        <van-dropdown-item
          title="性别"
          v-model="currentSex"
          @change="getConsultantList"
          :options="sexs"
        />
      </van-dropdown-menu>
      <van-dropdown-menu active-color="#555555">
        <van-dropdown-item
          title="年龄"
          v-model="age"
          @change="getConsultantList"
          :options="aegs"
        />
      </van-dropdown-menu>
      <!-- <van-dropdown-menu active-color="#555555">
        <van-dropdown-item title="指定负责" ref="item">
          <template>
            <van-cell>
              <template #right-icon>
                <van-cascader
                  active-color="#15b4ff"
                  v-model="currentDepartment"
                  :options="departmentList"
                  @close="visibleDepartment = false"
                  @finish="selectDepartment"
                />
              </template>
            </van-cell>
          </template>
        </van-dropdown-item>
      </van-dropdown-menu> -->
    </div>

    <!-- 分隔 -->
    <div
      class="card item flex_row"
      v-for="(item, index) in consultList"
      :key="index"
    >
      <div class="item_left">
        <img :src="joinUrlImg(item.avatar)" alt="" />
        <!-- <div class="count">咨询{{ "123" }}次</div> -->
      </div>
      <div class="item_right flex_column between">
        <div class="name_stauts flex_row flex_align_center between">
          <div class="name">{{ item.name }}({{ item.age }}岁)</div>
          <!-- <div class="status">{{ "在线中" }}</div> -->
        </div>
        <div class="label flex_row flex_align_center">
          <div class="text nowrap">标签:</div>
          <div class="flex_row flex_align_center">
            <img
              v-for="(e, i) in item.userTag"
              :key="i"
              :src="joinUrlImg(e.tag_icon)"
              alt=""
              class="label_icon"
            />
          </div>
        </div>
        <div class="department flex_row">
          <div>负责部门：</div>
          <div>{{ item.department_name }}</div>
        </div>
        <div class="sex">性别：{{ item.sex == 1 ? "男" : "女" }}</div>

        <button
          class="btn nowrap flex_row flex_center_jc flex_align_center"
          @click="toConsultation(item)"
        >
          发起咨询
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  queryOnlineConsultantList,
  queryConsultantTag,
} from "@/api/consultation/online.js";

import { sex, age } from "@/utils/options.js";

import selectMixin from "@/mixins/selectMixin";
import { mapState } from "vuex";
import { joinUrlImg } from "@/utils/setUrlImg";
export default {
  mixins: [selectMixin],
  data() {
    return {
      labelList: [],
      // 选择性别
      currentSex: "",
      // 年龄
      age: "",
      // 选择的标签
      currentLabel: "",
      //当前页
      page: 1,
      // 总条数
      pageSize: 999,
      // 咨询师列表
      consultList: [],
    };
  },
  created() {
    this.getConsultantList();
    this.getConsultantTag();
    // this.getTag();
    // this.getDepartment(this.INFO.platform_unit_id);
  },
  computed: {
    sexs() {
      return sex.map((item) => {
        return {
          text: item.label,
          value: item.id,
        };
      });
    },
    aegs() {
      return age.map((item) => {
        return {
          text: item + "岁",
          value: item,
        };
      });
    },
    ...mapState(["INFO"]),
  },
  watch: {
    department(nv) {
      this.getConsultantList();
    },
  },
  methods: {
    joinUrlImg,

    //查询标签
    async getConsultantTag() {
      let res = await queryConsultantTag();
      if (res.code == 200) {
        this.labelList = res.data;
      }
    },
    // 获取所有标签
    async getTag() {
      const { data } = await apiGetAllTag();
      if (data.code == 200) {
        this.label = data.data.map((item) => {
          return {
            text: item.name,
            icon: joinUrlImg(item.icon),
            id: item.id,
          };
        });
      }
    },
    // 发起咨询
    toConsultation(item) {
      this.$router.push(`/launch?id=${item.id}`);
    },
    // 获取咨询师列表
    async getConsultantList() {
      const params = {
        page: this.page,
        pageSize: this.pageSize,
        tag_id: this.currentLabel.id,
        sex: this.currentSex,
        age: this.age,
        department_id: this.department,
      };
      if (this.age == 0 || this.age == "不限") delete params.age;
      let res = await queryOnlineConsultantList(params);
      if (res.code == 200) {
        this.consultList = res.data.data;
      }
    },
    onConfirm(item) {
      this.currentLabel = item;
      this.$refs.tags.toggle();
      this.getConsultantList();
    },
  },
};
</script>

<style lang="less" scoped>
@import "./css/index.less";
</style>
